import Taro, { useDidShow, getCurrentInstance } from "@tarojs/taro";
import React, { useState, useEffect } from "react";
import { View, Text } from "@tarojs/components";
import { AtButton, AtToast } from "taro-ui";
import { getUserInfo, getLikesArticle, countFan, countConcerned, privateChat } from "./api";
import Card from "../../../component/Card";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/toast.scss";
import css from "./index.module.less";

export default function Index() {
  const { userId } = getCurrentInstance().router.params;
  const initialState = {
    "avatar": "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
    "concernedNumber": 0,
    "created": "",
    "email": "",
    "fansNumber": 0,
    "id": 0,
    "status": 0,
    "tel": "",
    "title": null,
    "username": "微信用户",
    "uuid": ""
  }
  const [user, setUser] = useState(initialState);
  const [likeArticles, setLikeArticles] = useState([]);
  const [fansNumber, setFansNumber] = useState(0);
  const [concernedNumber, setConcernedNumber] = useState(0);
  
  useEffect(() => {
    getUserInfo(userId).then((res) => {
      if (res.code === 200) {
        const userInfo = res.data;
        setUser(userInfo);
        getLikesArticle(userInfo.uuid, 1, 10).then((res) => {
          if (res.code === 200) {
            setLikeArticles(res.data);
          }
        })

        countFan(userInfo.id).then((res) => {
          if (res.code === 200) {
            setFansNumber(res.data);
          }
        })

        countConcerned(userInfo.id).then((res) => {
          if (res.code === 200) {
            setConcernedNumber(res.data);
          }
        })
      }
    })
  }, [])
  
  const sendMessage = () => {
    Taro.getStorage({
      key: 'userInfo',
      success: function (res) {
        const userInfo = res.data;
        const data = {
          userId: userInfo.id,
          otherId: user.id,
        }
        privateChat(data).then((res) => {
          if (res.code === 200) {
            console.log(res.data);
          }
        })
      }
    })
  }

  const detail = (uuid, liked) => {
    Taro.navigateTo({ url: `../../index/detail/index?uuid=${uuid}&liked=${liked}` })
  }

  const toCheckConcerned = () => {
    Taro.navigateTo({ url: `../concerned/index?id=${user.id}` })
    
  }

  const toCheckFan = () => {
    Taro.navigateTo({ url: `../fan/index?id=${user.id}` })
  }
  return (
    <React.Fragment>
      <View className={css.app}>
        <View className={css.head}>
          <View className={css.top}>
            <image className={css.img} src={user.avatar} />
            <View className={css.name}>
              <Text>{user.username}</Text>
              <Text className={css.text}>{user.title}</Text>
            </View>
          </View>
          
          <View className={css.bottom}>
            <View className={css.count}>
              <View onClick={toCheckConcerned}>
                <View>{concernedNumber}</View>
                <View>关注</View>
              </View>
              <View onClick={toCheckFan}>
                <View>{fansNumber}</View>
                <View>粉丝</View>
              </View>
              <View>
                <View>{likeArticles.length}</View>
                <View>点赞</View>
              </View>
            </View>
            <View className={css.update} onClick={sendMessage}>
              <Text>私聊</Text>
            </View>
          </View>
        </View>
        <View className={css.card}>
          {likeArticles.map((result) => {
            return (
              <View onClick = {() => detail(result.article.uuid, result.liked)}>
                <Card {...result} />
              </View>
            )
          })}
        </View>
      </View>
    </React.Fragment>
  );
}
